<template>
  <div class="classroom-manage">
    <el-row :gutter="4" type="flex" justify="start">
      <el-col :span="22">
        <el-input
          v-model="accountantName"
          placeholder="班级名称"
          style="width:200px;"
          @keyup.enter.native="handleFilter"
        />
        <el-button type="primary" @click="handleFilter">搜索</el-button>
        <el-button size="medium" type="info" @click="clearParams">清空</el-button>
      </el-col>
      <el-col :span="2">
        <!--<el-button type="primary" style="float:left" @click="createClassroom">创建班级</el-button>-->
      </el-col>
    </el-row>
    <ul class="tablecheck">
      <li>
        班级 :
        <span>{{ tableList.classroom }}</span> 个
      </li>
    </ul>
    <eltable
      :table-label="tableLabel"
      :table-data="listFilter.slice((currentpage-1)*pagesize,currentpage*pagesize)"
    >
      <el-table-column slot="isEnd" class-name="status-col" label="班级状态" width="150" align="center">
        <template slot-scope="scope">
          <el-tag>{{ scope.row.status | statusFilter }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column slot="button" label="操作" prop="manage" align="center" min-width="20">
        <template slot-scope="scope">
          <el-dropdown split-button type="primary" trigger="click" @command="handleClick($event, scope)" @click="getClassDetail(scope.row)">
            查看
            <el-dropdown-menu v-if="scope.row.status === 'closed'" slot="dropdown">
              <el-dropdown-item v-if="scope.row.recommended === 0" command="1">推荐班级</el-dropdown-item>
              <el-dropdown-item v-if="scope.row.recommended === 1" command="2">取消推荐</el-dropdown-item>
              <el-dropdown-item command="4">发布班级</el-dropdown-item>
            </el-dropdown-menu>
            <el-dropdown-menu v-if="scope.row.status === 'draft'" slot="dropdown">
              <el-dropdown-item v-if="scope.row.recommended === 0" command="1">推荐班级</el-dropdown-item>
              <el-dropdown-item v-if="scope.row.recommended === 1" command="2">取消推荐</el-dropdown-item>
              <el-dropdown-item command="4">发布班级</el-dropdown-item>
              <el-dropdown-item command="6">删除班级</el-dropdown-item>
            </el-dropdown-menu>
            <el-dropdown-menu v-if="scope.row.status === 'published'" slot="dropdown">
              <el-dropdown-item v-if="scope.row.recommended === 0" command="1">推荐班级</el-dropdown-item>
              <el-dropdown-item v-if="scope.row.recommended === 1" command="2">取消推荐</el-dropdown-item>
              <el-dropdown-item command="3">关闭班级</el-dropdown-item>
              <!--<el-dropdown-item command="5">发布通知短信</el-dropdown-item>-->
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </eltable>
    <pagination
      :total="total"
      :current-page="currentpage"
      :page-size="pagesize"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
    <!-- 短信通知 -->
    <el-dialog :visible.sync="dialog" title="短信推送" width="580px">
      <el-form ref="message" :model="message" label-width="120px">
        <el-form-item label="发送对象:">
          <span style="color:#737373">所有用户</span>
        </el-form-item>
        <el-form-item label="预计通知人数:">
          <span style="color:#737373">{{ message.person }}</span>
        </el-form-item>
        <el-form-item label="发送内容:">
          <span style="color:#737373">
            {{ message.content }}
            <a :href="message.url" style="color:#428bca">链接地址</a>
          </span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="updateMessage">保 存</el-button>
      </div>
    </el-dialog>
    <!-- 推荐序号设置 -->
    <el-dialog :visible.sync="dialogVisible" title="设置推荐班级" width="980px">
      <el-form ref="sequence" :model="sequence" :rules="rules">
        <el-form-item label="序号" prop="num">
          <el-input v-model="sequence.num" style="width: 280px"/>
          请输入长度不能超过8位的整数
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateClassroom">保 存</el-button>
      </div>
    </el-dialog>
    <!-- 查看班级详情弹框 -->
    <el-dialog :visible.sync="classInfoDialog" title="班级详情信息" width="50%">
      <el-form ref="classInfoForm" :model="classInfoForm">
        <el-row>
          <el-col :span="12">
            <el-form-item label="班级">
              <span>{{ classInfoForm.className }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建时间">
              <span>{{ classInfoForm.createTimeStr }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-table :data="classInfoForm.courseInfoTable" border style="width:100%;">
          <el-table-column prop="title" label="课程标题" align="center"/>
          <el-table-column prop="type" label="课程类型" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.type | typeFilter }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="价格" align="center"/>
        </el-table>
        <el-table :data="classInfoForm.studentInfoTable" border style="width:100%;margin-top:20px;">
          <el-table-column prop="nickName" label="学员用户名" align="center"/>
          <el-table-column prop="name" label="学员姓名" align="center"/>
          <el-table-column prop="createTimeStr" label="注册时间" align="center"/>
        </el-table>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="classInfoDialog = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import Eltable from '@/components/Eltable'
  import Pagination from '@/components/Pagination'
  import {deleteClassroom, getClassroomDetail, getClassroomList, updateClassroom} from '@/api/subject/classroom' // 接口
  import {getTenantId} from '@/utils/auth'

  export default {
    components: {
      Eltable,
      Pagination
    },
    filters: {
      statusFilter(status) {
        const statusMap = {
          draft: '未发布',
          published: '已发布',
          closed: '已关闭'
        };
        return statusMap[status]
      },
      typeFilter(type) {
        const typeMap = {
          live: '直播',
          open: '普通公开',
          liveOpen: '公开直播',
          normal: '普通'
        };
        return typeMap[type]
      }
    },
    data() {
      return {
        accountantName: '',
        total: 0,
        currentpage: 1,
        pagesize: 10,
        dialogVisible: false,
        classInfoDialog: false,
        dialog: false,
        message: {
          person: '',
          content: '【bjtest1】 班级：《五年级一班》现已开始报名 !',
          url: ''
        },
        tableList: {
          classroom: '0',
          published: '0',
          closed: '0',
          unpublish: '0'
        },
        sequence: {
          entity: {},
          num: ''
        },
        tableLabel: [
          {
            label: '班级编号', width: '10', prop: 'id'
          },
          {
            label: '班级名称', width: '30', prop: 'title'
          },
          {
            label: '课程数', width: '10', prop: 'courseNum'
          },
          {
            label: '价格', width: '10', prop: 'price'
          }
        ],
        tableData: [],
        listFilter: [],
        classInfoForm: {
          courseInfoTable: [],
          studentInfoTable: []
        },
        rules: {
          num: [
            {required: true, message: '必填信息', trigger: 'blur'},
            {min: 1, max: 8, message: '长度不能超过8位', trigger: 'blur'},
            {pattern: /^[0-9]*[1-9][0-9]*$/, message: '请输入长度不能超过8位的整数'}
          ]
        }
      }
    },
    updated() {
      this.statusfil()
    },
    mounted() {
      this.getData()
    },
    methods: {
      statusfil() {
        this.tableList.classroom = this.tableData.length;
        this.tableList.published = this.tableData.filter((item) => {
          return item.status === '已发布'
        }).length;
        this.tableList.closed = this.tableData.filter((item) => {
          return item.status === '已关闭'
        }).length;
        this.tableList.unpublish = this.tableData.filter((item) => {
          return item.status === '未发布'
        }).length
      },
      handleSizeChange(val) {
        this.currentpage = 1;
        this.pagesize = val.value;
        if (this.pagesize >= 20) {
          scrollTo(50, 800)
        }
      },
      handleCurrentChange(val) {
        this.currentpage = val.value;
        if (this.pagesize >= 20) {
          scrollTo(50, 800)
        }
      },
      updateMessage() {
        this.dialog = true
      },
      handleFilter() {
        this.getData()
      },
      clearParams() {
        this.accountantName = '';
        this.getData()
      },
      getData() {
        getClassroomList(getTenantId(), this.accountantName).then(response => {
          this.tableData = response.data.items;
          this.listFilter = response.data.items;
          this.total = response.data.items.length
        })
      },
      handleClick(command, scope) {
        if (command === '1') {
          this.dialogVisible = true;
          this.sequence.entity = scope.row
        } else if (command === '2') {
          scope.row.recommended = 0;
          scope.row.recommendedSeq = 100;
          scope.row.recommendedTime = ''
        } else if (command === '3') {
          scope.row.status = 'closed'
        } else if (command === '4') {
          scope.row.status = 'published'
        } else if (command === '5') {
          this.dialog = true;
          console.log('并不会发送短信啊？？可以发了！')
        } else if (command === '6') {
          this.$confirm(`永久删除这个班级吗`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            deleteClassroom(scope.row.id).then(reponse => {
              if (reponse.code === 200) {
                this.$notify({
                  title: '成功',
                  message: '班级已被删除！',
                  type: 'success',
                  duration: 2000
                })
              }
            });
            this.getData()
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '取消删除'
            })
          })
        }
        if (command === '2' || command === '3' || command === '4') {
          updateClassroom(scope.row).then(() => {
            this.$notify({
              title: '成功',
              message: '班级状态已修改！',
              type: 'success',
              duration: 2000
            });
            this.getData()
          })
        }
      },
      getClassDetail(row) {
        this.classInfoDialog = true;
        this.classInfoForm.className = row.title;
        this.classInfoForm.createTimeStr = row.createTimeStr;
        getClassroomDetail(row.id).then(res => {
          this.classInfoForm.studentInfoTable = res.data.studentInfoTable;
          this.classInfoForm.courseInfoTable = res.data.courseInfoTable
        })
      },
      updateClassroom() {
        this.$refs.sequence.validate((valid) => {
          if (valid) {
            this.dialogVisible = false;
            this.sequence.entity.recommended = 1;
            if (!this.sequence.num) this.sequence.num = 100;
            this.sequence.entity.recommendedSeq = this.sequence.num;
            this.sequence.entity.recommendedTime = new Date();
            updateClassroom(this.sequence.entity).then(() => {
              this.$notify({
                title: '成功',
                message: '推荐班级成功',
                type: 'success',
                duration: 2000
              });
              this.getData()
            })
          } else {
            console.log('error submit!!');
            return false
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .classroom-manage {
    // padding: 14px 20px;
    .tablecheck {
      list-style: none;
      padding: 0 0 0 11px;
      margin: 14px 0 21px;
      height: 44px;
      line-height: 44px;
      box-sizing: border-box;
      background-color: #f8f8f8;

      li {
        float: left;
        display: block;
        margin-right: 20px;
        color: #72726f;

        span {
          color: rgb(15, 202, 62);
          font-weight: 600;
        }
      }
    }

    .addprogram {
      width: 100%;
      padding: 20px 0;

      .el-button {
        float: right;
      }
    }
  }
</style>
